import React, { Component } from 'react';

import { Form } from '@ant-design/compatible';

import {
  Card,
  Col,
  Input,
  Row,
  Select,
  Checkbox,
  Upload,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';

import '@ant-design/compatible/assets/index.css';

const { TextArea } = Input;
const { Item } = Form;

interface BasicInfoProps {
  detailInfo: any;
  anotherInfo: any;
  forms: object;
  mergeFun: (name: string, value: string | number | object) => void;
}

interface BasicInfoState {
  imageUrl: string;
}

class BasicInfoElem extends Component<BasicInfoProps, BasicInfoState> {
  state: BasicInfoState = {
    imageUrl: '',
  }

  static getDerivedStateFromProps(nextProps: BasicInfoProps, preState: BasicInfoState) {
    const { detailInfo } = nextProps;
    const { imageUrl } = preState;
    if (Object.keys(detailInfo).length > 0 && !imageUrl) {
      const { img } = detailInfo;
      return { imageUrl: img };
    }
    return null;
  }

  getBase64 = (img: any, callback: any) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  handleUpload = ({ file, fileList }: any) => {
    const { mergeFun } = this.props;
    this.getBase64(file.originFileObj, (imageUrl: string) => {
      mergeFun('file', fileList.length <= 0 ? 1 : file.originFileObj);
      this.setState({ imageUrl });
    });
  }

  render() {
    const {
      forms: { getFieldDecorator },
      detailInfo,
      anotherInfo,
    }: any = this.props;
    const { imageUrl } = this.state;

    const uploadButton = (
      <div>
        <PlusOutlined />
        <div className="ant-upload-text">上传</div>
      </div>
    );

    return (
      <Card title="基本信息" bordered={false}>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="快递公司" colon={false}>
              {getFieldDecorator('name', {
                initialValue: detailInfo.name,
                rules: [{ required: true, message: '请输入快递公司' }],
              })(
                <Input allowClear placeholder="请输入" />,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="电子面单" colon={false}>
              {getFieldDecorator('canElectronic', {
                initialValue: detailInfo.canElectronic,
                rules: [{ required: true, message: '请选择是否支持电子面单' }],
              })(
                <Select placeholder="请选择">
                  <Select.Option value={1}>支持</Select.Option>
                  <Select.Option value={0}>不支持</Select.Option>
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="业务范围" colon={false}>
              {getFieldDecorator('scopeArray', {
                initialValue: detailInfo.scopeArray
                  && detailInfo.scopeArray.split(',').map((item: string) => (
                    Number(item)
                  )),
                rules: [{ required: true, message: '请选择业务范围' }],
              })(
                <Checkbox.Group>
                  <Checkbox value={1}>派件</Checkbox>
                  <Checkbox value={2}>揽件</Checkbox>
                </Checkbox.Group>,
              )}
            </Item>
          </Col>
        </Row>

        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="公司别名" colon={false}>
              {getFieldDecorator('templateType', {
                initialValue: detailInfo.templateType,
                rules: [{ required: false, message: '请选择公司别名' }],
              })(
                <Select placeholder="请选择">
                  {anotherInfo.map((item: any) => (
                    <Select.Option value={item[0]} key={item[0]}>{item[1]}</Select.Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="客服热线" colon={false}>
              {getFieldDecorator('telephone', {
                initialValue: detailInfo.telephone,
                rules: [{ required: true, message: '请输入客服热线' }],
              })(<Input allowClear placeholder="请输入" />)}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="显示位置" colon={false}>
              {getFieldDecorator('displayArray', {
                initialValue: detailInfo.displayArray
                  && detailInfo.displayArray.split(',').map((item: string) => (
                    Number(item)
                  )),
                rules: [{ required: true, message: '请选择显示位置' }],
              })(
                <Checkbox.Group>
                  <Checkbox value={2}>APP</Checkbox>
                  <Checkbox value={4}>快递员APP</Checkbox>
                </Checkbox.Group>,
              )}
            </Item>
          </Col>
        </Row>

        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="公司地址" colon={false}>
              {getFieldDecorator('address', {
                initialValue: detailInfo.address,
                rules: [{ required: true, message: '请输入公司地址' }],
              })(<Input allowClear placeholder="请输入" />)}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="运单规则" colon={false}>
              {getFieldDecorator('expRule', {
                initialValue: detailInfo.expRule,
                rules: [{ required: true, message: '请输入配置运单规则' }],
              })(<TextArea placeholder="请输入" />)}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="上传图片" colon={false}>
              {getFieldDecorator('fileImg', {
                initialValue: imageUrl,
                rules: [{ required: true, message: '请上传图片' }],
              })(
                <Upload
                  accept=".png,.jpg,.jpeg,.gif"
                  listType="picture-card"
                  className="uploadBtn"
                  showUploadList={false}
                  onChange={this.handleUpload}
                >
                  {imageUrl
                    ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                    : uploadButton}
                </Upload>,
              )}
            </Item>
          </Col>
        </Row>
      </Card>
    );
  }
}

export default BasicInfoElem;
